<template>
  <div id="map">{{ lon }}</div>
</template>

<script setup>
import L from "leaflet";
import "leaflet/dist/leaflet.css";
import { reactive, onMounted, defineProps } from "vue";
import { useRoute } from "vue-router";
import pinia from "@/store/pinia";
import { useMapStore } from "@/store/map";
import { nav } from "@/assets/img.js";

const mapStore = useMapStore(pinia);
const route = useRoute();

console.log(route.params.lon);
console.log(route.params.lat);

onMounted(() => {
  const map = L.map("map").setView([route.params.lat, route.params.lon], 13);

  L.tileLayer("http://{s}.tile.osm.org/{z}/{x}/{y}.png", {
    minZoom: 7,
    maxZoom: 16,
    attribution:
      '&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors'
  }).addTo(map);

  L.marker([route.params.lat, route.params.lon], {
    icon: L.icon({
      iconUrl: nav, // 图标图片的URL
      iconSize: [32, 32], // 图标的大小
      iconAnchor: [15, 15], // 图标的锚点，即图标的位置应该放置在地图上的位置
      popupAnchor: [-3, -76] // 弹出框的锚点，即当你点击图标时，弹出框应该出现在哪个位置
    })
  })
    .addTo(map)
    .bindPopup("车牌：A pretty CSS3 popup.<br> 半径：Easily customizable.", {
      offset: [0, 50] // 水平方向偏移20像素，垂直方向偏移-20像素
    })
    .openPopup();

    var circle = L.circle([route.params.lat, route.params.lon], {
    color: 'red',
    fillColor: '#f03',
    fillOpacity: 0.5,
    radius: 500
}).addTo(map);
});
</script>

<style scoped>
#map {
  height: 100%;
}
</style>
